<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-20 10:00:03
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:32:41
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\collectionManage\airSeaDispatchWriteOff\components\WriteOffDialog.vue
 * @Description: 核销弹窗
-->
<template>
  <el-dialog 
    v-model="visible"
    title="核销"
    :rules="rules"
    width="25%"
    :before-close="cancel"
  >
    <el-form
      ref="formRef" 
      :model="formData"
      label-width="150px"
    >
      <el-form-item label="账单总金额（￥）" prop="ab">
        <el-input v-model="formData.ab" disabled></el-input>
      </el-form-item>
      <el-form-item label="实收金额" prop="cd">
        <el-input v-model="formData.cd"></el-input>
      </el-form-item>
      <el-form-item label="核销时间" prop="cd">
        <el-date-picker v-model="formData.cd" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="info" @click="cancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, defineEmits, reactive, defineExpose } from 'vue'

const emits = defineEmits(['success'])
const formRef = ref(null)
const visible = ref<boolean>(false)   
const loading = ref<boolean>(false)   
const formData = reactive({
  ab: '',
  cd: '',
})

const rules = {
  ab: [{ required: true, message: '请输入发票号码！', trigger: 'blur' }],
  cd: [{ required: true, message: '请选择开票日期！', trigger: 'blur' }],
}

const cancel = () => {
  formRef.value && formRef.value.resetFields()
  visible.value = false
}
const confirm = () => {
  loading.value = true

  // fn().then(res => {
  //   if (res.code === 200) {
  //     ElMessage.success('操作成功！')
  //     emits('success')
  //   }
  // }).finally(() => {
  //   loading.value = false
  // })
}

const open = () => {
  visible.value = true
}

defineExpose({
  open,
})
</script>